<template>
  <div class="details-container display-flex justify-content-flex-justify">
    <div>
      <div class="title-left">基础信息</div>
      <div class="display-flex flex-wrap">
        <div class="detail-item">
        规格型号：<span>{{ details.type }}</span>
      </div>
      <div class="detail-item">
        维护周期（天）：<span>{{ details.lifeSpan }}</span>
      </div>
      <div class="detail-item">
        设备金额(万元)：<span>{{ details.money }}</span>
      </div>
      <div class="detail-item">
        出厂编号：<span>{{ details.factoryNumber }}</span>
      </div>
      <div class="detail-item">
        设备IP：<span>{{ details.address }}</span>
      </div>
      <div class="detail-item">
        额定功率：<span>{{ details.ratedPower }}</span>
      </div>
      <div>备注：<span>{{details.remark}}</span></div>
      </div>
     <div style="width:90%;border-top:1px solid #ddd;margin:20px 0;">

    </div>
      <div class="title-left">气氛参数</div>
      <div class="display-flex flex-wrap">
        <div class="detail-item">
        <span style="width:14px;display:inline-block"></span>氧含量：<span class="real-num-width">{{realTimeObj.oxygen}}%</span>
      </div>
      <div class="detail-item">
        舱室压力：<span class="real-num-width">{{ realTimeObj.cabinPressure }}mbar</span>
      </div>
      <div class="detail-item">
        滤网压差：<span class="real-num-width">{{ realTimeObj.filterPressureDiff }}mbar</span>
      </div>
      <div class="detail-item">
        风机流速：<span class="real-num-width">{{ realTimeObj.fanFlux }}m/s</span>
      </div>
      <div class="detail-item">
        基板温度：<span class="real-num-width">{{ realTimeObj.buildCylinderTemperature }}℃</span>
      </div>
      <div class="detail-item">
        管道温度：<span class="real-num-width">{{ realTimeObj.fanPipeTemp }}℃</span>
      </div>
      </div>
    </div>
    <div>
        <!-- <el-image
          style="width: 250px; height: 250px"
          :src="details.imageUrl"
          fit="fill"
        ></el-image> -->
         <div
        :style="{
          width: '250px',
          height: '250px',
          background: 'url(' + !details.imageUrl?img:details.imageUrl + ') no-repeat center center',
          backgroundSize: 'cover'
        }"
      ></div>
      <!-- <img style="width:1px;height:1px;" v-show="false" :src="details.imageUrl" @error="handleError($event)"/> -->
    </div>
  </div>
</template>

<script>
export default {
  props: ["details",'realTimeObj'],
  data() {
    return {
      img:require('@/assets/404_images/no-img.jpg')
    };
  },
  methods:{
     handleError(e){
      this.details.imageUrl=this.img
},
  }
};
</script>

<style  scoped>
.details-container {
  color: #666;
  padding: 10px 20px 0px 20px;
  line-height: 28px;
  font-size: 15px;
}
.detail-item{
  width:33.3%;
}
.title-left{
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}
.real-num-width{
  display: inline-block;
  min-width:90px;
}
</style>>
